forwardRef 弃用

字数

289 字

阅读时间

2 分钟

React 19 的变化

在 React 19 中，forwardRef 将不再必要，可以直接将 ref 作为 prop 传递^[1]。

新的用法

// 直接在函数组件中接收 ref prop
function MyInput({ placeholder, ref }) {
  return <input placeholder={placeholder} ref={ref} />;
}

// 使用时直接传递 ref
<MyInput ref={ref} />

旧的用法（将被弃用）

import { forwardRef } from 'react';

const MyInput = forwardRef(function MyInput(props, ref) {
  return <input {...props} ref={ref} />;
});

重要说明

• React 团队将提供 codemod 工具来自动更新组件代码
• forwardRef 将在未来版本中被完全移除
• 类组件中的 ref 处理方式保持不变，因为它们引用的是组件实例^[1:1]

类组件中的 ref

• 类组件仍需使用 React.forwardRef 或 React.createRef
• ref 在类组件中不会作为 props 传递

迁移建议

1. 等待 React 19 正式发布
2. 使用官方提供的 codemod 工具进行代码迁移
3. 在新代码中直接使用 ref prop 方式
4. 对于类组件，保持现有的 ref 处理方式

贡献者

Ryan.G

页面历史

最后编辑于 大约 1 个月前

查看完整历史

b22b20c-docs: Update React Hooks index and various documentation pages

---

1. React 官方文档 - forwardRef ↩︎ ↩︎